<script setup lang="ts">
import { reactive, ref } from "vue";
import { ConsultType } from "@/enum";
import { fetchConsultOrderListAPI } from "@/api/consultRecordApi.ts";
import { showFailToast } from "vant";
import type { ConsultOrderItem } from "@/types/chitchat";
import type { ConsultOrderListParams } from "@/types/consultRecordTypes";
import ConsultItem from "@/views/consultRecord/components/consultItem/consultItem.vue";

const props = defineProps<{
    type: ConsultType
}>();

/*获取问诊列表的参数*/
const params = reactive<ConsultOrderListParams>({
    current: 1,
    pageSize: 10,
    type: props.type,
});

/*是否加载问诊列表*/
const loading = ref<boolean>(false);
/*是否加载完成*/
const finished = ref(false);
/*总共的问诊列表条数*/
const total = ref<number>(0);

/*问诊列表*/
const consultList = ref<ConsultOrderItem[]>([]);

/*获取问诊列表的请求函数*/
const fetchConsultOrderList = async () => {
    try {
        const { data } = await fetchConsultOrderListAPI(params);
        consultList.value.push(...data.rows);
        total.value = data.total;
        if (consultList.value.length >= total.value) {
            finished.value = true;
        } else {
            params.current++;
        }
        loading.value = false;
    } catch (error: any) {
        showFailToast(error.message);
    }
};


const onLoad = () => {
    fetchConsultOrderList();
};

/*子组件删除问诊订单成功的回调函数*/
const deleteConsultOrder = (id: string) => {
    consultList.value = consultList.value.filter(item => item.id !== id);
};

</script>

<template>
    <div class="consult-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <consult-item v-for="(item) in consultList" :key="item.id" :item="item" @delete="deleteConsultOrder"></consult-item>
        </van-list>
    </div>
</template>

<style scoped lang="scss">
.consult-list {
    padding: 10px 15px;
}
</style>
